import React, { Component } from 'react';

import { connect } from 'dva';

import { Row, Col } from 'antd';

import * as echarts from 'echarts';//引入主模块

import QueryForm from './components/query-form';

import styles from './index.css';

/**
 * 按栏目统计
 */
class Index extends Component {

  render() {
    const {
      queryFormState,
    } = this.props;
    return (
      <div className={styles.main}>
        <div className={styles.header}>
          数据统计
        </div>
        {/** 查询表单 */}
        <QueryForm
          state={queryFormState} />
        <Row gutter={[24, 16]}>
          <Col span={12}>
            <div id="forms" style={{width:'100%',height:'350px'}}></div>
          </Col>
          <Col span={12}>
            <div id="forms0" style={{width:'100%',height:'350px'}}></div>
          </Col>
        </Row>
        <Row gutter={[24, 16]}>
          <Col span={12}>
            <div id="forms1" style={{width:'100%',height:'350px'}}></div>
          </Col>
          <Col span={12}>
            <div id="forms2" style={{width:'100%',height:'350px'}}></div>
          </Col>
        </Row>
      </div>
    )
  }

  componentDidMount() {
    const getBeforeDate = (days) => {
      let now=new Date().getTime();
      let ago=now-86400000*days;//一天的毫秒数为86400000
      let agoData= new Date(ago);
      let year = agoData.getFullYear();
      let mon = agoData.getMonth() + 1;
      let day = agoData.getDate();
      let date=year+'/'+mon+'/'+day;
      return date;
    };
    //获取当前时间的六天前的日期
    console.log(getBeforeDate(6));
    //获取当前时间的日期 格式: 2021/2/7
    console.log(new Date().toLocaleDateString());
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('forms'));
    let myChart0 = echarts.init(document.getElementById('forms0'));
    let myChart1 = echarts.init(document.getElementById('forms1'));
    let myChart2 = echarts.init(document.getElementById('forms2'));
    // 绘制图表
    myChart.setOption({   
      tooltip: {},
      xAxis: {
          data: ["2017","2018","2019","2020","2021"]
      },
      yAxis: {},
      series: [
          {
            name: '数量',
            type: 'line',
            data: [76, 102, 120, 127, 150, 152,155]
          },
          {
            name: '数量1',
            type: 'line',
            data: [5, 299, 36, 11, 10, 20,15]
          },
          {
            name: '数量2',
            type: 'line',
            data: [305, 320, 334, 356, 380, 381,340]
          },
      ]
    });
    myChart0.setOption({
      tooltip: {},
      xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: ["2017","2018","2019","2020","2021"]
        }
      ],
      yAxis: [
          {
              type: 'value'
          }
      ],
      series: [
          {
              name: '参考人数',
              type: 'bar',
              emphasis: {
                  focus: 'series'
              },
              data: [320, 332, 301, 334, 390]
          },
          {
              name: '及格人数',
              type: 'bar',
              emphasis: {
                  focus: 'series'
              },
              data: [220, 182, 191, 234, 290]
          }
      ]
    });
    myChart1.setOption({
      xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ["2017","2018","2019","2020","2021"]
    },
    series: [
        {
            name: 'Java',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 334, 390, 330, 320]
        },
        {
            name: 'H5',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90]
        },
        {
            name: '游戏开发',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
        },
        {
            name: '外语专业',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [150, 212, 201, 154, 190]
        },
        {
            name: '金融',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 832, 901, 934, 1290]
        }
    ]
    });
    myChart2.setOption({
      title: {
          left: 'center'
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          orient: 'vertical',
          left: 'left',
      },
      series: [
          {
              name: '计算机专业', 
              type: 'pie',
              radius: '50%',
              data: [
                  {value: 24, name: 'Java'},
                  {value: 66, name: 'H5'},
                  {value: 5, name: 'C语言'},
                  {value: 5, name: 'Linux'},
                  {value: 4, name: '计算机基础'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'pages_home_statistics_column/allStateReset' });
  }
}

const mapStateToProps = (state) => {

  const { 
    queryFormState,
  } = state.pages_home_statistics_column;
  return {
    queryFormState,
  }
}

export default connect (mapStateToProps) (Index);